import React from 'react'

import {
    ContestWrapper,
    Tab,
    TabItem,
    NoData
} from './style'
import Nothing from '../../assets/images/Nothing.jpg'

const Contest = ({ data }) => {
    return (
        // styled components 接管 切页面
        <ContestWrapper>
            <h2>热门赛事</h2>
            <Tab>
                {
                    data.map(item =>
                        <TabItem key={item.id}>
                            <span>{item.title}</span>
                        </TabItem>)
                }
            </Tab>
            {data.length == 0 &&
                <NoData>
                    <img src={Nothing} alt="" />
                    <p>暂无赛事，看更多演出</p>
                </NoData>}
        </ContestWrapper>
    )
}

export default Contest